<!doctype html>

<!--
  ~ jquery.mb.components
  ~ Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
  ~ email: mbicocchi@open-lab.com
  ~ site: http://pupunzi.com
  ~
  ~ Licences: MIT, GPL
  ~ http://www.opensource.org/licenses/mit-license.php
  ~ http://www.gnu.org/licenses/gpl.html
  -->
<html>
<head>
  <title>mbScrollable</title>
  <link href="css/mb.scrollable.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="inc/mbScrollable.js"></script>
  <script type="text/javascript">
    $(function(){
      if (self.location.href == top.location.href){
        $("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
        var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>");
        $("body").prepend(logo);
        $("#logo").fadeIn();
      }

      $("#myScroll").mbScrollable({
        width:700,
        elementsInPage:1,
        elementMargin:2,
        shadow:"#999 2px 2px 2px",
        height:"auto",
        controls:"#controls",
        slideTimer:600,
        autoscroll:true,
        scrollTimer:4000,
				changePageCallback:function(){
					var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages;
					$('#controls .positiondisplay').html(positiondisplay);
				},
				loadCallback:function(){
					var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages;
					$('#controls .positiondisplay').html(positiondisplay);
				}
      });

      $("#myScroll1").mbScrollable({
        dir:"vertical",
        width:140,
        height:400,
        elementsInPage:3,
        elementMargin:6,
        shadow:"#999 2px 2px 2px",
        controls:"#controls1",
        slideTimer:600,
        autoscroll:false,
        scrollTimer:6000
      });

      setTimeout(function(){$("#wrapper").fadeIn();},2000);
    });
  </script>

</head>
<body >


<div id="wrapper">
  <h1>mb.scrollable.demo</h1>
  <div id="horizontal">
    One element per page; horizontal; autoscroll: true.
    <br>
    <br>
    <div id="myScroll">
      <div class="scrollEl" style="background-color:#9999ff">1</div>
      <div class="scrollEl" style="background-color:#cc9900">2</div>
      <div class="scrollEl" style="background-color:#660066">3</div>
      <div class="scrollEl" style="background-color:#009966">4</div>
      <div class="scrollEl" style="background-color:#6600ff">5</div>
      <div class="scrollEl" style="background-color:#9999ff">6</div>
      <div class="scrollEl" style="background-color:#33cc00">7</div>
      <div class="scrollEl" style="background-color:#cc00cc">8</div>
      <div class="scrollEl" style="background-color:#009999">9</div>
      <div class="scrollEl" style="background-color:#ff66ff">10</div>
      <div class="scrollEl" style="background-color:#33ff33">11</div>
      <div class="scrollEl" style="background-color:#cccc00">12</div>
      <div class="scrollEl" style="background-color:#00cccc">13</div>
      <div class="scrollEl" style="background-color:#ff33ff">14</div>
    </div>

    <div id="controls">
      <div class="first">first</div><div class="prev">prev</div>
      <div class="next">next</div><div class="last">last</div>
      <div class="pageIndex"></div>
      <div class="positiondisplay">AAA</div>
      <div class="start">start</div><div class="stop">stop</div>
      <div class="goto" onclick="$('#myScroll').goToPage($('#pg').val());">go to page <input id="pg" style="width:20px; border:1px solid gray" value="1"></div>
      <div class="getIDX" onclick="alert($('#myScroll').get(0).idx);">getIDX</div>
    </div>

    <br>
    <br>
    <span style="cursor:pointer;color:red; font-weight:bold;" onclick="$('#horizontal').fadeOut(500,function(){$('#vertical').fadeIn();});">show vertical scroller</span><br>
  </div>

  <div id="vertical" style="display:none;">
    three elements per page; vertical; auto-scroll: false.
    <br>
    <br>
    <div id="myScroll1">
      <div class="scrollEl" style="background-color:#9999ff"><span>1</span></div>
      <div class="scrollEl" style="background-color:#cc9900"><span>2</span></div>
      <div class="scrollEl" style="background-color:#660066"><span>3</span></div>
      <div class="scrollEl" style="background-color:#009966"><span>4</span></div>
      <div class="scrollEl" style="background-color:#6600ff"><span>5</span></div>
      <div class="scrollEl" style="background-color:#9999ff"><span>6</span></div>
      <div class="scrollEl" style="background-color:#33cc00"><span>7</span></div>
      <div class="scrollEl" style="background-color:#cc00cc"><span>8</span></div>
      <div class="scrollEl" style="background-color:#009999"><span>9</span></div>
      <div class="scrollEl" style="background-color:#ff66ff"><span>10</span></div>
      <div class="scrollEl" style="background-color:#33ff33"><span>11</span></div>
      <div class="scrollEl" style="background-color:#cccc00"><span>12</span></div>
      <div class="scrollEl" style="background-color:#00cccc"><span>13</span></div>
      <div class="scrollEl" style="background-color:#ff33ff"><span>14</span></div>
    </div>

    <div id="controls1">
      <div class="first">first</div><div class="prev">prev</div>
      <div class="next">next</div><div class="last">last</div><br>
      <div class="pageIndex"></div><br>
      <div class="start">start</div><div class="stop">stop</div>
    </div>
    <br>
    <br>
    <span style="cursor:pointer;color:red; font-weight:bold;" onclick="$('#vertical').fadeOut(500,function(){$('#horizontal').fadeIn();});">show horizontal scroller</span><br>
  </div>
</div>

</body>
</html>